<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path=request.getScheme()+"://"+request.getServerName()+":"+
	request.getServerPort()+request.getContextPath()+"/";
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
    <title>ONESTAR-在线医疗管理系统</title>
	<meta charset="UTF-8">
	<link rel="icon" href="static/img/me.jpg" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="static/css/style.css" /> 
    <link rel="stylesheet" type="text/css" href="static/css/login-inner.css" />
    <!-- js -->
    <script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.js"></script>
    <script type="text/javascript" src="static/js/ckform.js"></script>
    <script type="text/javascript" src="static/js/common.js"></script>
    
    <!--表单验证  -->
    <script type="text/javascript" src="static/js/jquery.validate.js"></script>
    <script type="text/javascript" src="static/js/messages_zh.js"></script>
	<!--消息提示框  -->
    <script type="text/javascript" src="static/js/coco-message.js"></script>
</head>
<body>
	<div class="container">
		
	    <form class="form-signin" method="post" action="user" id="form-signin">
	    	<input type="hidden" name="method" value="checkLogin">
	        <h2 class="form-signin-heading" >在线医疗管理系统</h2>

	        <p id="message" style="width: 400px;height: 30px;text-align: center;"></p>
	        <p><input type="text" name="username" class="input-block-level" value="lisi" placeholder="账号" ></p>
	        <p><input type="password" name="password" class="input-block-level" placeholder="密码" value="321" >
	        <p class="yanzhengma">
	        	<input type="text" name="verify" class="input-medium" placeholder="验证码" > 
	        	<img id="code" class="code_images"  src="${path }authImage" /> 
	        	<a href='javascript:void(0);' onclick="javascript:changeImg()" style="color:white;text-decoration: none;">
	        		<span style="color:blue;margin-left: 5px;">看不清？</span>
	        		<span id= "yanzhengmaError"></span>
        		</a>
				
			</p>
	        <p style="text-align: center;">
	        <input id="login" type="button" value="登录" name="login" class="btn btn-large btn-primary" style="width: 150px;"/>
	        <a href="regist.jsp">请先注册</a>
	        </p>
	    </form>
	</div>
		
	<script type="text/javascript">
		function changeImg(){
		    var img = document.getElementById("code"); 
		    img.src = "${path}/authImage?date=" + new Date();;
		}
		/* 表单验证 */
		$("#form-signin").validate({
			errorPlacement: function(error, element) {
				if (element.parent().hasClass("yanzhengma")){
					error.appendTo($("#yanzhengmaError"));
				}else {					
					error.insertAfter(element);
				}
			},
			onfocusout: function(element) { $(element).valid(); },
			rules:{
				username:{
                    required:true
                },
                password:{
                    required:true
                },
                verify:{
                	required:true
                }                    
            },
            messages:{
            	username:{
                    required:"用户名不能为空"
                },
                password:{
                    required: "密码不能为空"
                },
                verify:{
                	required: "验证码不能为空"
                }                                    
            },
            errorElement: "em"
		});
		
		// 表单提交
		$("#login").click(function(){
			var flag = $("#form-signin").valid();
			if(!flag){
				//没有通过验证
				alert("没有通过验证");
		        return;
			}
			var data = $("#form-signin").serialize();
			$.ajax({
				url:"user/login",
				type:"post",
				data:data,
				dataType:"json",
				success:function(message){
					console.log(message);
					if(message.status_code == 200){
						$("#message").css("color","green");
						cocoMessage.success("登录成功，1秒后跳转到主页",30000);
						setTimeout(function(){

							location.href = "${path}"+"index.jsp";
						},1000) ;
						
					}else{
						$("#message").css("color","red");
					}
					$("#message").text(message.message);
				}
			});
		});
	</script>
</body>
</html>